<template>
  <div class="myMain">
    <div class="top">
      <h1>rtsp 视频流引入</h1>
      <el-button @click="handleChange(1)">通道1</el-button>
      <el-button @click="handleChange(2)">通道2</el-button>
      <el-button @click="handleChange1(1)">回放1</el-button>
      <el-button @click="handleChange1(2)">回放2</el-button>
    </div>
    <video-my :rtsp="rtspUrl1"></video-my>
  </div>
</template>

<script>
import VideoMy from './components/video.vue'
export default {
  name: 'index1',
  components:{
    VideoMy
  },
  data() {
    return {
      webRtcServer: null,
      rtspUrl1:'rtsp://admin:hangyue1@192.168.1.18:554/Streaming/Channels/101'
    }
  },
  mounted() {
    // //video：需要绑定的video控件ID
    // //127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
    // this.webRtcServer = new WebRtcStreamer('video','http://192.168.1.4:8000')
    // //需要查看的rtsp地址
    // this.webRtcServer.connect('rtsp://admin:hangyue1@192.168.1.18:554/Streaming/Channels/101')
    // //rtsp://user:password@ip:port/h264/ch1/main/av_stream--海康
    // //rtsp://user:password@ip:port/cam/realmonitor?channel=1&subtype=0--大华
  },
  beforeDestroy() {
    // this.webRtcServer.disconnect()
    // this.webRtcServer = null
  },
  methods: {
    handleChange(val) {
      this.rtspUrl1=`rtsp://admin:hangyue1@192.168.1.18:554/Streaming/Channels/${val}01`
    },
    handleChange1(val) {
      this.rtspUrl1=`rtsp://admin:hangyue1@192.168.1.18:554/Streaming/tracks/101starttime=20240526t1120z&endtime=20240506t043515z`
    }

  }
}
</script>

<style scoped lang="scss">
.myMain{
  width: 100%;
  height: 100%;
  border: 1px solid red;
  .top{
    width: 100%;
    // height: 500px;
    background-color: antiquewhite;
  }
}


</style>